<div>
    <el-form  label-width="100%">
        <el-form-item label="">
        </el-form-item>
    </el-form>
    <div class="panel-parent">
        <div class="self">
            <el-form>
                <el-form-item label=""  class = "transparent">
                    <el-button type="primary" @click="addGoods">添加商品</el-button>
                </el-form-item>
            </el-form>
            <kf-table
                    ref="baseTable"
                    :data="tableData"
                    one-screen
                    dialog-size="tiny"
                    title="添加商品"
                    :close-on-click-modal=false
                    layout="total, sizes, prev, pager, next, jumper"
            >
                <el-table-column prop="goodsCategory"  label="商品大类"  min-width="120">
                </el-table-column>
                <el-table-column  prop="goodsName" label="商品名称" min-width="120" >
                </el-table-column>
                <el-table-column  prop="goodsSpec" label="商品规格" min-width="100" >
                </el-table-column>
                <el-table-column prop="goodsCode" label="商品编码" min-width="100">
                </el-table-column>
                <el-table-column prop="inventoryNum" label="库存量" width="150">
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="200" >
                    <template scope="scope" >
                        <el-button type="text" @click="stockIn(scope)">入库</el-button>
                        <el-button type="text" @click="stockOut(scope)">出库</el-button>
                    </template>
                </el-table-column>
                <template slot="editForm">
                    <el-form :inline="true" :model="goodsFormInline"  ref="goodsFormInline" class="goods-form-inline">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="商品名称"  prop="goodsName" label-width="120px">
                                    <el-input v-model="goodsFormInline.goodsName" placeholder="商品名称"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="商品大类"  prop="goodsCategory" label-width="120px">
                                    <el-input v-model="goodsFormInline.goodsCategory" placeholder="商品大类"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="商品规格"  prop="goodsSpec" label-width="120px">
                                    <el-input v-model="goodsFormInline.goodsSpec" placeholder="商品规格"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="商品编码"  prop="goodsCode" label-width="120px">
                                    <el-input v-model="goodsFormInline.goodsCode" placeholder="商品编码"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </template>
                <template slot="formBtn">
                    <el-button  @click="clearGoods()">取 消</el-button>
                    <el-button type="primary" @click="saveGoods()">确定保存</el-button>
                </template>
            </kf-table>

            <!--模态框：商品入库-->
            <el-dialog :visible.sync="dialogFormVisible">
                <el-form :inline="true" :model="stockInFormInline"  ref="stockInFormInline" class="stockIn-form-inline">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="供货商"  prop="supplier" label-width="120px" >
                                <el-select v-model="stockInFormInline.supplier" style="width: 140px;" placeholder="请选择供货商">
                                <el-option
                                        v-for="item in suppliers"
                                        :key="item.supplierId"
                                        :value="item.supplierAbbr">
                                </el-option>
                            </el-select>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="进货日期"  required label-width="120px" prop="stockDate">
                                <el-date-picker
                                        v-model="stockInFormInline.stockDate"
                                        align="right"
                                        type="date"
                                        placeholder="选择日期"
                                        format="yyyy-MM-dd"
                                        @change="pickTime1"
                                        :picker-options="pickerOptions1" style="width: 175px">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="进货数量"  prop="stockNum" label-width="120px">
                                <el-input v-model="stockInFormInline.stockNum" placeholder="进货数量"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="进货单价"  prop="stockPrice" label-width="120px">
                                <el-input v-model="stockInFormInline.stockPrice" placeholder="进货单价"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="合计"  prop="total" label-width="120px">
                                <el-input v-model="stockInFormInline.total" placeholder="合计"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="已付金额"  prop="paidMoney" label-width="120px">
                                <el-input v-model="stockInFormInline.paidMoney" placeholder="已付金额"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="欠款金额"  prop="debtMoney" label-width="120px">
                                <el-input v-model="stockInFormInline.debtMoney" placeholder="欠款金额"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="进货人"  prop="stockPeople" label-width="120px">
                                <el-input v-model="stockInFormInline.stockPeople" placeholder="进货人"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="单据号"  prop="invoiceNum" label-width="120px">
                                <el-input v-model="stockInFormInline.invoiceNum" placeholder="单据号"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="备注"  prop="remarks" label-width="120px">
                                <el-input  type="textarea" v-model="stockInFormInline.remarks" placeholder="备注"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="18" >
                            <el-form-item >
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" >
                            <el-button  @click="clearStockIn()">取 消</el-button>
                            <el-button type="primary" @click="saveStockIn()">确定保存</el-button>
                        </el-col>
                    </el-row>
                </el-form>


            </el-dialog>

        </div>

    </div>
</div>